Vue.component('yl-button', {
    template: `
    <span>
        <el-button :type="type" @click="Export" :loading="loading">
            <slot></slot>
        </el-button>
        <el-table id="ExportData" :data="data" style="display: none; width: 100%;margin-bottom: 20px;">
            <el-table-column label="序号"type="index"></el-table-column>
            <el-table-column prop="Department_SerialNumber" label="供应商内码"></el-table-column>
            <el-table-column prop="Supplier_Name" label="供应商名称"></el-table-column>
            <el-table-column prop="Tax_Number" label="纳税识别号"></el-table-column>
            <el-table-column prop="Supplier_Address" label="供应商地址省">
                <template v-slot="{row}">
                    {{row.Supplier_Address.split('/')[0]}}
                </template>
            </el-table-column>
            <el-table-column prop="Supplier_Address" label="市">
                <template v-slot="{row}">
                    {{row.Supplier_Address.split('/')[1]}}
                </template>
            </el-table-column>
            <el-table-column prop="Supplier_Address" label="区">
                <template v-slot="{row}">
                    {{row.Supplier_Address.split('/')[2]}}
                </template>
            </el-table-column>
            <el-table-column prop="Supplier_Address" label="详细地址">
                <template v-slot="{row}">
                    {{row.Supplier_Address.split('/')[3]}}
                </template>
            </el-table-column>
            <el-table-column prop="Bank_Name" label="银行账户"></el-table-column>
            <el-table-column prop="Account_Number" label="开户行"></el-table-column>
        </el-table>
    </span>`,
    props: ['loading', 'data', 'type'],
    methods: {
        Export() {
            this.$emit('click')
        }
    }
})
Vue.component('add-user', {//添加用户组件
    template: `<el-dialog title="添加联系人" :visible.sync="visibleDialog" width="700px">
    <el-form ref="contract" :model="form" :rules="rules" :inline-message="true">
        <el-descriptions :column="1" border size="small">
            <el-descriptions-item label="联系人名称">
                <el-form-item prop="Name">
                    <el-input v-model.trim="form.Name" placeholder="请输入联系人姓名"></el-input>
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="姓名">
                <el-form-item prop="ID_Name">
                    <el-input v-model.trim="form.ID_Name" placeholder="请输入姓名"></el-input>
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="手机号">
                <el-form-item prop="User_Number">
                    <el-input v-model.trim="form.User_Number" placeholder="请输入手机号"></el-input>
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="密码">
                <el-form-item prop="Pass_Word">
                    <el-input v-model.trim="form.Pass_Word" placeholder="请输入客户邮箱"></el-input>
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="性别">
                <el-form-item prop="Sex">
                    <el-radio-group v-model.trim="form.Sex">
                        <el-radio label="0">男</el-radio>
                        <el-radio label="1">女</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-descriptions-item>
        </el-descriptions>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="$emit('update:visible',false)">取消</el-button>
        <el-button :loading="loading" type="primary" @click="submitForm('contract')">提交</el-button>
    </span></el-dialog>`,
    props: ['id', 'visible'],
    data() {
        const validator = (rule, value, callback) => {
            if (!validatemobile(this.form.User_Number)) {
                callback(new Error('请输入有效手机号'));
            } else {
                callback();
            }
        }
        return {
            visibleDialog: false,
            form: {
                User_Number: '',
                ID_Name: '',//表名
                Pass_Word: 'Aa123456',//描述
                Name: '',
                Image: '',
                Sex: '0',//0男1女
                Mail: '',
                Creation_Datetime: '',
                Row_Status: '0',
                Children: {
                    base_system_user_role: [{
                        System_User_Role_SerialNumber: '',
                        User_Number: '',
                        Role_SerialNumber: 'firstparty',
                        Other_SerialNumber: '',
                    }],
                }
            },
            rules: {
                User_Number: [{ required: true, validator, trigger: 'blur' }],
                ID_Name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
            },
            loading: false,
        }
    },
    watch: {
        visible() {
            this.visibleDialog = this.visible
        },
        visibleDialog(val) {
            this.$emit('update:visible', val)
        },
    },
    methods: {
        submitForm(formName) {
            const that = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    that.loading = true;
                    that.form.Creation_Datetime = getYMDHMSDate();
                    that.form.Children.base_system_user_role[0].Other_SerialNumber = that.id;
                    $.ajax({
                        headers: requestHeaders(),
                        url: `${BASE_URL2}/generalBusiness/generalSave`,
                        type: 'POST',
                        data: {
                            Data: JSON.stringify({ Add: { base_system_user_info: [that.form] } })
                        },
                        success: function (res) {
                            if (res.Status === 'success') {
                                that.form = {
                                    User_Number: '',
                                    ID_Name: '',//表名
                                    Pass_Word: 'Aa123456',//描述
                                    Name: '',
                                    Image: '',
                                    Sex: '0',//0男1女
                                    Mail: '',
                                    Creation_Datetime: '',
                                    Row_Status: '0',
                                    Children: {
                                        base_system_user_role: [{
                                            System_User_Role_SerialNumber: '',
                                            User_Number: '',
                                            Role_SerialNumber: 'firstparty',
                                            Other_SerialNumber: '',
                                        }],
                                    }
                                }
                                that.$message.success("提交成功")
                                that.$emit('update:visible', false)
                                that.$emit('success')
                            } else {
                                that.$message.error("提交失败，请稍后再试")
                            }
                        },
                        error: function () {
                            that.$message.error("提交失败，该手机号已存在")
                        },
                        complete: function (XMLHttpRequest) {
                            that.loading = false
                            requestPretreatment(XMLHttpRequest);
                        },
                        dataType: "json"
                    })
                } else {
                    that.$message({
                        message: sumberError,
                        type: 'warning'
                    })
                    return false;
                }
            })
        }
    },
})
Vue.component('edit-user', {//添加用户组件
    template: `<el-dialog title="添加联系人" :visible.sync="visibleDialog" width="700px">
    <el-form ref="contract" :model="form" :rules="rules" :inline-message="true">
        <el-descriptions :column="1" border size="small">
            <el-descriptions-item label="联系人名称">
                <el-form-item prop="Name">
                    <el-input v-model.trim="form.Name" placeholder="请输入联系人姓名"></el-input>
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="姓名">
                <el-form-item prop="ID_Name">
                    <el-input v-model.trim="form.ID_Name" placeholder="请输入姓名"></el-input>
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="手机号">
                <el-form-item prop="User_Number">
                    <el-input v-model.trim="form.User_Number" placeholder="请输入手机号"></el-input>
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="密码">
                <el-form-item prop="Pass_Word">
                    <el-input v-model.trim="form.Pass_Word" placeholder="请输入客户邮箱"></el-input>
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="性别">
                <el-form-item prop="Sex">
                    <el-radio-group v-model.trim="form.Sex">
                        <el-radio label="0">男</el-radio>
                        <el-radio label="1">女</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-descriptions-item>
        </el-descriptions>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="$emit('update:visible',false)">取消</el-button>
        <el-button :loading="loading" type="primary" @click="submitForm('contract')">提交</el-button>
    </span></el-dialog>`,
    props: ['id', 'User','visible'],
    data() {
        const validator = (rule, value, callback) => {
            if (!validatemobile(this.form.User_Number)) {
                callback(new Error('请输入有效手机号'));
            } else {
                callback();
            }
        }
        return {
            visibleDialog: false,
            form: {
                User_Number: '',
                ID_Name: '',//表名
                Pass_Word: 'Aa123456',//描述
                Name: '',
                Sex: '0',//0男1女
                Mail: '',
                Creation_Datetime: '',
                Row_Status: '0',
            },
            rules: {
                User_Number: [{ required: true, validator, trigger: 'blur' }],
                ID_Name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
            },
            loading: false,
        }
    },
    watch: {
        visible() {
            this.visibleDialog = this.visible
        },
        visibleDialog(val) {
            this.$emit('update:visible', val);
            this.getData(this.User.User_Number);
        },
    },
    methods: {
        getData(User_Number){
            const that = this;
            $.ajax({
                headers:requestHeaders(),
                url: `${BASE_URL2}/generalBusiness/generalQueryByTableNameWithOriginal`,
                type: 'POST',
                data: { 
                   
                    Data: 'base_system_user_info',
                    Condition:"User_Number='"+User_Number+"'",
                },
                success: function (res) {
                    if (res.length == 1) {
                        that.form = res[0];
                    }
                },
                complete: function (XMLHttpRequest) {
                    requestPretreatment(XMLHttpRequest);
                },
                dataType: "json"
            });
        },
        submitForm(formName) {
            const that = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    that.loading = true;
                    $.ajax({
                        headers: requestHeaders(),
                        url: `${BASE_URL2}/generalBusiness/generalSave`,
                        type: 'POST',
                        data: {
                            Data: JSON.stringify({ Modify: { base_system_user_info: [that.form] } })
                        },
                        success: function (res) {
                            if (res.Status === 'success') {
                                that.form = {
                                    User_Number: '',
                                    ID_Name: '',//表名
                                    Pass_Word: 'Aa123456',//描述
                                    Name: '',
                                    Sex: '0',//0男1女
                                    Mail: '',
                                    Creation_Datetime: '',
                                    Row_Status: '0',
                                }
                                that.$message.success("提交成功")
                                that.$emit('update:visible', false)
                                that.$emit('success')
                            } else {
                                that.$message.error("提交失败，请稍后再试")
                            }
                        },
                        error: function () {
                            that.$message.error("提交失败，该手机号已存在")
                        },
                        complete: function (XMLHttpRequest) {
                            that.loading = false
                            requestPretreatment(XMLHttpRequest);
                        },
                        dataType: "json"
                    })
                } else {
                    that.$message({
                        message: sumberError,
                        type: 'warning'
                    })
                    return false;
                }
            })
        }
    },
})
new Vue({
    el: '#app',
    data() {
        return {
            form: {
                SQLSerialNumber: "P_base_system_user_firstparty",
                PaginationNumber: 1,//页数
                RowAmount: 20,//每页数据条数
                Supplier_Name: '',
                Condition: '',
                Department_SerialNumber:'',
                ExtensionCondition: '',
            },
            total: 0,
            tableData: [],	//表格数据
            ExportData: [], //导出
            loading: false,
            visibleAddUser: false,//添加联系人
            visibleEditUser: false,//修改联系人
            supplier: {},//选中供应商
            Department_SerialNumber:'',
            user:{},//选择联系人
        }
    },
    mounted() {
        if (getCookie('role')) {
            let roleObj = JSON.parse(getCookie('role'));
            this.Department_SerialNumber = roleObj.other;
            this.form.Department_SerialNumber = roleObj.other;
            this.form.Condition =  window.btoa(unescape(encodeURIComponent(roleObj.other)))
        }
        this.getList(this.form);//前端分页
    },
    methods: {
        onSerach() {			//查询方法
            this.form.PaginationNumber = 1;
            this.getList(this.form)
        },
        Add() {
            window.location.href = './add.html'
        },
        handleSizeChange(val) {
            this.form.PaginationNumber = 1;
            this.form.RowAmount = val;
            this.getList(this.form)
        },
        handleCurrentChange(val) {
            this.form.PaginationNumber = val;
            this.getList(this.form)
        },
        getList(data) {//换页方法
            const that = this
            $.ajax({
                headers: requestHeaders(),
                url: `${BASE_URL2}/generalBusiness/generalPaginationQueryBySQLSerialNumber`,
                type: 'POST',
                data,
                success: function (Result) {
                    that.tableData = Result.Rows;
                    that.total = Result.TotalRows;
                },
                complete: function (XMLHttpRequest) {
                    requestPretreatment(XMLHttpRequest);
                },
                dataType: "json"
            });
        },
        Edit(Department_SerialNumber) {
            sessionStorage.setItem("Department_SerialNumber", Department_SerialNumber)
            window.location.href = './edit.html?Department_SerialNumber=' + Department_SerialNumber
        },
        Export(form) {
            const that = this;
            this.loading = true;
            let data = deepClone(form);
            data.SQLSerialNumber = 'E_business_supplier_info';
            data.Condition = window.btoa(unescape(encodeURIComponent("%" + data.Supplier_Name + "%")))
            $.ajax({
                headers: requestHeaders(),
                url: `${BASE_URL2}/generalBusiness/generalQueryBySQLSerialNumber`,
                type: 'POST',
                data,
                success: function (Result) {
                    if (Result.length > 0) {
                        that.ExportData = Result;
                        that.$nextTick(() => {
                            let wb = XLSX.utils.table_to_book(document.querySelector("#ExportData"));
                            var wbout = XLSX.write(wb, {
                                bookType: "xlsx",
                                bookSST: true,
                                type: "array"
                            });
                            try {
                                saveAs(
                                    new Blob([wbout], {
                                        type: "application/octet-stream"
                                    }),
                                    "供应商信息" + (+new Date()) + ".xlsx"
                                );
                            } catch (e) {
                                if (typeof console !== "undefined") console.log(e, wbout);
                            }
                            that.$message({
                                message: '已成功导出',
                                type: 'success'
                            })
                            return wbout;
                        })
                    }
                },
                complete: function (XMLHttpRequest) {
                    that.loading = false;
                    requestPretreatment(XMLHttpRequest);
                },
                dataType: "json"
            });
        },
        AddUser(row) {
            this.supplier = row;
            this.Department_SerialNumber = row.Department_SerialNumber
            this.visibleAddUser = true;
        },
        EditUser(row){
            this.user = row;
            this.visibleEditUser = true; 
        }
    },
})